<template>
	<div class="detail" v-if="data.goods">
		<header class="title-btn pos-fix layout full-width pl15 pr15 pt10" style="top:0;z-index:1;" v-if="scrollTop < 100">
			<img style="width:30px;" src="../../../assets/icon15.png" alt="" @click="$router.back('-1')">
			<!-- <img style="width:30px;" src="../../../assets/icon16.png" alt=""> -->
			<i></i>
		</header>
		<section class="detail-banner">
			<swiper :data="data.goods.goods_img_arr" v-if="data.goods" img-key="" :options="bannerOptions">
			</swiper>
		</section>
		<section class="content container pt20 pb20 border-b20" v-if="data.goods">
			<p class="fs16 black">{{ data.goods.goods_name }}</p>
			<span class="fs13 c4a mt10">{{ data.goods.introduction }}</span>
			<p class="mt15"><strong class="fs12 c333">已筹数量：</strong><span class="subject fs14">{{ data.sales }}个</span></p>
			<van-progress class="mt10 mb20" color="#ff7b1a" pivot-color="#ff7b1a" :percentage="data.progress"/>
			<ul class="row">
				<li class="col s4 align-center">
					<p class="fs18 c333 bold">{{ data.count }}</p>
					<p class="fs12 c333">目标数量</p>
				</li>
				<li class="col s4 align-center border-l border-r">
					<p class="fs18 c333 bold">{{ data.buyer_num }}</p>
					<p class="fs12 c333">人数</p>
				</li>
				<li class="col s4 align-center">
					<p class="fs18 c333 bold">{{ data.end_time, 'dd天hh时' | formatDate }}</p>
					<p class="fs12 c333">剩余时间</p>
				</li>
			</ul>
		</section>
		<h3 class="container pt15 pb15 fs13 black border-b20">预计发货时间：<i class="c666">{{ data.send_time, 'yyyy年MM月dd天hh时' | formatDate }}</i></h3>		
		<router-link tag="section" :to="'/detail/gears?id=' + data.goods.goods_id" class="reserve container border-b20" v-if="data.goods">
			<div class='layout border-b pt15 pb15'>
				<p class="fs13 black">预订价：<i class="fs22 subject" v-if="data.rz_flag == '0'">￥{{ data.goods.market_price }}</i><span class="fs12 subject">起</span></p>
				<p class="fs12 c999">零售价：<del>￥{{ data.goods.price }}</del><van-icon class="black" name="youjiantou"/></p>
			</div>
			<p class="fs13 black pt15 pb15 bold align-center">查看全部档位（{{ data.gear_num }}）</p>
		</router-link>
		<section class="coupon container border-b20">
			<h3 class="pt15 pb15 fs14 black">优惠券</h3>
			<ul class="pb15">
				<li class="layout" v-for="item in coupon_data.list">
					<div class="flex_1 border-r pt10 pb10 pl10 pr10 full-height">
						<h3 class="white fs22 bold"><i class="fs13">￥</i>{{ item.cur_num }}</h3>
						<p class="fs12 white mt10 mb10">满{{ item.at_least }}元立减</p>
						<p class="fs10 white">有效期{{ item.start_time, 'yyyy.MM.dd' | formatDate  }} - {{ item.end_time, 'yyyy.MM.dd' | formatDate  }}</p>
					</div>
					<p class="white pl10 pr10 get-pull" @click="getCoupon(item)">立即领取</p>
				</li>
			</ul>
		</section>
		<section class="serve container border-b20">
			<h3 class="pt15 pb15 layout fs14 black" @click="serve_show = true"><i>服务：部分地区无法配送</i><van-icon class="black" name="youjiantou"/></h3>
		</section>
		<goods-detail :data="data" :schedule_data="schedule_data"></goods-detail>
		<section>
			<h3 class="align-center pt20 pb20">猜你喜欢</h3>
			<recommend-list></recommend-list>
		</section>
		<footer class="footer layout lh50 h50 border-t pos-fix full-width bg-white" v-if="data.goods.status == 1" style="bottom:0;">
			<ul class="row full-width full-height">
				<li class="pt15 col s4 align-center"> 
					<p class="fs10 c85">客服</p>
				</li>
				<li class="pt15 col s4 align-center" :class="{ onAttention : isAttention }"  @click="collectGoods">
					<p class="fs10 c85">收藏</p>
				</li>
				<li class="pt15 col s4 align-center" :class="{ onAttention : isRemind }" @click="remind">
					<p class="fs10 c85">提醒</p>
				</li>
			</ul>
			<router-link tag="button" :to="'/detail/gears?id=' + data.goods.goods_id" class="w40 bg-subject white">立即预定</router-link>
		</footer>
		<footer class="footer border-t pos-fix full-width bg-white" style="bottom:0;" v-else-if="data.goods.status == 0">
			<button class="lh50 h50 full-width align-center bg-e5 c666 fs16">众筹已结束</button>
			<button class="lh50 h50 full-width align-center fs16 white" style="background-color: #ff7b1a">我还想要</button>
		</footer> 
		<img class="pos-fix go-back" src="../../../assets/icon14.png" alt="" v-if="scrollTop > 200" @click="returnTop">

		<van-popup v-model="serve_show" position="bottom" class="pb40">
		  	<p class='fs16 c333 pt15 pb15 align-center pos-rel border-b'>服务<i class="c666 pos-abs" style="right: 10%;top: 50%;transform: translate(50%,-50%);">X</i></p>
		  	<div class="pt20 pb20 layout container">
		  		<i class="circle bg-red block" style="width:10px;height: 10px;"></i>
		  		<div class="flex_1 ml15">
		  			<p class="fs15 c333 mt15 bold">部分地区无法配送</p>
		  			<p class="fs12 c666">不支持省份，新疆维吾尔自治区、台湾省、香港特别行政区</p>
		  		</div>
		  	</div>
		</van-popup>
	</div>
</template>

<script>
import Swiper from "@/components/Swiper";
import RecommendList from "@/components/Recommend-list";
import GoodsDetail from "@/components/Goods-detail";
import { formatDate } from "@/utils";
import { Progress,Popup,Dialog } from 'vant';
	export default{
		components:{
			Dialog,
			Swiper,
			Progress,
			RecommendList,
			GoodsDetail,Popup
		},
		filters:
		{
			formatDate(time,fmt){
				let date = new Date(time);
				return formatDate(date,fmt);
			}
		},
		data()
		{
			return{
				isRemind	  : false,
				isAttention   : false,
				serve_show    : false,
				scrollTop     :'',
				banner        :[],
				data          :[],
				schedule_data :[],
				coupon_data   :[],  
				crow_id       :this.$route.query.id,
				bannerOptions:{
					slidesPerView : 'auto',
					loopedSlides  : 'auto',
					autoplay: {
						delay: 5000,
					},
				}
			}
		},
		watch:
		{
			'$route'()
			{
				this.crow_id = this.$route.query.id,
				this.loadData();
				window.scrollTo(0,0);  
			}
		},
		mounted()
		{
			window.addEventListener('scroll', this.handleScroll)
		},
		created()
		{
    		window.scrollTo(0,0);  
    		this.loadData();
		},
		methods:
		{
			// 页面置顶
			handleScroll () {
			  this.scrollTop = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop
			},
			loadData()
			{
				this.$http.get('/goods/goods',{ params : { crow_id : this.crow_id }}).then(res =>{
					this.data = res.data;
					if(res.data.sc_flag == 0)
						this.isAttention = false;
					else
						this.isAttention = true;
				})

				this.$http.get('/goods/progress',{ params : { crow_id : this.crow_id }}).then(res => {
					this.schedule_data = res.data;
				})

				this.$http.get('/goods/coupon').then( res=> {
					this.coupon_data = res.data;
				})
			},
			collectGoods()
			{
				if(!this.isAttention)
					this.$http.post('/goods/favor',{ id : this.data.goods.goods_id }).then( res=> { 
						this.isAttention = true;
					})
				else
					this.$http.post('/goods/disfavor',{ id : [ this.data.goods.goods_id ] }).then( res=> { 
						this.isAttention = false;
					})
			},
			getCoupon(item)
			{
				this.$http.get('/coupon/getCoupon',{ params : { id : item.coupon_id }}).then(res=>{
					Toast('领取成功！')
				})
			},
			remind()
			{
				if(!this.isRemind){
					Dialog.alert({
					  	title: '设置提醒',
					  	message: '该商品已设置在结束前24小时提醒您',
					  	confirmButtonText : '好的'
					}).then(() => {
						this.$http.post('/usernotice/addhave',{ goods_id : this.data.goods.goods_id }).then(res =>{
							this.isRemind = true;
						})
					});
				}
				else
				{
					Dialog.alert({
					  	title: '设置提醒',
					  	message: '该商品已取消在结束前24小时提醒您',
					  	confirmButtonText : '好的'
					}).then(() => {
						this.$http.post('/usernotice/cancelhave',{ goods_id : this.data.goods.goods_id }).then(res =>{
							this.isRemind = false;
						})
					});
				}

			},
			returnTop()
			{
				var scrollToTop = window.setInterval(() => {
				    var pos = window.pageYOffset;
				    if ( pos > 0 ) {
				        window.scrollTo( 0, pos - 50 ); // how far to scroll on each step
				    } else {
				        window.clearInterval( scrollToTop );
				    }
				}, 1);
			}
		}
	}
</script>

<style lang="less">
	.detail{
		.detail-banner{
			img{

			}
		}
		.coupon{
			ul{
				li{
					width: 80%;
					background-size:100%;
					background-position: center;
					background-repeat: no-repeat;	
					background-image: url(../../../assets/coupon-bg3.png);
					.get-pull{
						word-wrap: break-word;
						writing-mode:tb-rl;
					}
				}
			}
		}
		.footer{
			ul{
				li{
					background-size:20px 20px;
					background-position: center 10%;
					background-repeat: no-repeat;
					&:nth-child(1){
						background-image: url(../../../assets/icon13.png);
					}
					&:nth-child(2){
						background-image: url(../../../assets/icon11.png);
					}
					&:nth-child(3){
						background-image: url(../../../assets/icon12.png);
					}
				}
				.onAttention{
					&:nth-child(2){
						background-image: url(../../../assets/icon20.png)
					}
					&:nth-child(3){
						background-image: url(../../../assets/icon21.png)
					}
				}
			}
		}
		.go-back{
			bottom:10%;
			right:5%;
			width:40px;
		}
	}
</style>